﻿<template>
    <div>
        <div class="big_box">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>人员管理</el-breadcrumb-item>
                <el-breadcrumb-item>考勤列表</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>

            <el-row :gutter="10">
                <el-col :span="3">
                    <el-button type="primary" @click="AddAttendanceSetFc">添加考勤设置信息</el-button>
                </el-col>
            </el-row>
            <el-row :gutter="10" style="padding-top: 10px">
                <el-col>
                    <el-table :data="tableData"
                              style="width: 100%;"
                              border>
                        <el-table-column header-align="center" fixed type="index" label="序号" width="50" align="center" :index="_indexMethod"></el-table-column>
                        <el-table-column header-align="center" fixed prop="AttendanceMonth" label="考勤年月" align="center" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column header-align="center" fixed prop="NoAttendanceDay" label="不参与考勤日期" align="center" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column header-align="center" fixed prop="Remark" label="备注" align="center" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column header-align="center" fixed label="操作" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <el-button type="warning" @click="UpAttendanceSetFc(scope.row)" size="small">编辑</el-button>
                            </template>
                        </el-table-column>

                    </el-table>
                </el-col>
                <el-col :span="24">
                    <div class="block" style="float: right">
                        <el-pagination @size-change="GettableDB"
                                       @current-change="GettableDB"
                                       :current-page.sync="pagination.currentPage"
                                       :page-sizes="pagination.pagesizes"
                                       :page-size.sync="pagination.pagesize"
                                       layout="total, sizes, prev, pager, next, jumper"
                                       :total.sync="pagination.total">
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
        </div>

        <el-dialog :visible.sync="UpAttendanceSetShow" title="添加考勤信息" width="40%">
            <el-form label-width="150px" :model="AddAttendanceSet" ref="AddAttendanceSet_refs">
                <el-row>
                    <el-col :span="20" :offset="1">
                        <el-form-item label="考勤年月">
                            <el-date-picker v-model="AddAttendanceSet.AttendanceMonth"
                                            value-format="yyyy-MM"
                                            type="month"
                                            placeholder="选择月">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20" :offset="1">
                        <el-form-item label="不参与考勤日期">
                            <el-input v-model="AddAttendanceSet.NoAttendanceDay"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20" :offset="1">
                        <el-form-item label="备注">
                            <el-input v-model="AddAttendanceSet.Remark"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col style="text-align:center">
                        <el-button type="success" @click="AddAttendanceSetSave">添加信息</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>

        <el-dialog :visible.sync="UpAttendanceSetShow" title="修改考勤信息" width="40%">
            <el-form label-width="150px" :model="UpAttendanceSet"  >
                <el-row>
                    <el-col :span="20" :offset="1">
                        <el-form-item label="考勤年月">
                            <el-date-picker v-model="UpAttendanceSet.AttendanceMonth"
                                            value-format="yyyy-MM"
                                            type="month"
                                            placeholder="选择月">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20" :offset="1">
                        <el-form-item label="不参与考勤日期">
                            <el-input v-model="UpAttendanceSet.NoAttendanceDay"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20" :offset="1">
                        <el-form-item label="备注">
                            <el-input v-model="UpAttendanceSet.Remark"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col style="text-align:center">
                        <el-button type="success" @click="UpAttendanceSetSavebtn">修改信息</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "AttendanceSet",
        data() {
            return {

                AddAttendanceSetShow: false,
                UpAttendanceSetShow: false,
                tableData: [],
                AddAttendanceSet: {},
                UpAttendanceSet: {},
                //分页数据绑定
                pagination: {
                    currentPage: 1,
                    pagesizes: [15, 50, 100,],
                    pagesize: 15,
                    total: 0
                },
            }
        },
        created() {
            this.GettableDB();
        },
        methods: {
            _indexMethod(index) {
                return ((this.pagination.currentPage - 1) * this.pagination.pagesize) + index + 1
            },
            GettableDB() {
                let loading = this.openLoading()
                this.$http.post('/UserInfo/GetAttendanceSetDetail', {
                    offset: this.pagination.currentPage,
                    limit: this.pagination.pagesize
                }).then(x => {
                    loading.close()
                    console.log(x);
                    this.tableData = x.data.data;
                    this.pagination.total = x.data.count;
                })
            },

            AddAttendanceSetSave() {
                let loading = this.openLoading()
                this.$http.post("/UserInfo/AddAttendanceSet", {
                    attendanceSet: this.AddAttendanceSet
                }).then(x => {
                    loading.close()
                    console.log(x);
                    if (x.data.mes.IsSuccess) {
                        this.$message.success(x.data.mes.Msg)
                        this.AddAttendanceSetShow = false;
                        this.GettableDB();
                    } else {
                        this.$message.error(x.data.mes.Msg)
                    }
                })


            },

            AddAttendanceSetFc() {

                this.AddAttendanceSetShow = true;
            },

            UpAttendanceSetFc(obj) {
                this.UpAttendanceSetShow = true;
                this.UpAttendanceSet = JSON.parse(JSON.stringify(obj));
            },

            UpAttendanceSetSavebtn() {
                let loading = this.openLoading()
                   this.$http.post("/UserInfo/UpdateAttendanceSet", {
                       attendanceSet: this.UpAttendanceSet
                }).then(x => {
                    loading.close()
                    console.log(x);
                    if (x.data.mes.IsSuccess) {
                        this.$message.success(x.data.mes.Msg)
                        this.UpAttendanceSetShow = false;
                        this.GettableDB();
                    } else {
                        this.$message.error(x.data.mes.Msg)
                    }
                })


            },




        },
    }
</script>

<style scoped>
</style>